<template>
	<div class="nav">
		<img src="../../assets/肯德基.png" alt="">
		<span>爱的肯德基店</span>
		<div class="login-container">
			<h3 class="title">注册平台</h3>
			<el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px"
			 class="demo-ruleForm login-page">

				<el-form-item prop="username">
					<el-input type="text" v-model="username" auto-complete="off" placeholder="用户名" class="input"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="password" auto-complete="off" placeholder="密码" class="input"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="password" auto-complete="off" placeholder="再次确认密码" class="input"></el-input>
				</el-form-item>
				<el-form-item style="width: 100%">
					<el-button type="primary" style="width: 150px" @click="qd" :loading="logining">确定</el-button>
					<el-button type="primary" style="width: 150px" @click="click" :loading="logining" class="zc">取消</el-button>
				</el-form-item>
				<el-form-item>
					<span @click="click">已有账号返回登录</span>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				logining: false,
				ruleForm2: {},
				username: '',
				password: '',
				rules2: {
					account: [{
						required: true,
						message: "请输入账号",
						trigger: "blur"
					}],
					checkPass: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
				},
				checked: true,
			};
		},
		methods: {
			handleReset2() {
				this.$refs.ruleForm2.resetFields();
			},
			clickImg() {
				this.$router.push("/home");
			},
			click() {
				this.$router.push("/login");
			},
			qd() {
				if ((this.username == '' || this.password == '')) {
					this.$alert("请输入用户名或者密码", "提示", {
						confirmButtonText: "确定",
						type: "warning",
					});
				} else {
					this.$alert("注册成功", "提示", {
						confirmButtonText: "确定",
						type: "warning",
					});
				}
			}
			
		},
	};
</script>

<style scoped>
	img {
		width: 200px;
		height: 100px;
	}

	span {
		padding-left: 20px;
		color: blue;
	}

	.left img {
		width: 30px;
		height: 30px;
		padding-right: 30px;
		padding-top: 5px;
	}

	.cz {
		margin-left: 20px;
	}

	.nav {
		background-color: cornsilk;
		height: 600px;
		margin-left: 5%;
		width: 500px;
	}

	.login-container {
		margin-left: 20%;
		margin-top: 25%;

	}

	.input {
		width: 350px;
	}

	h3 {
		padding-left: 140px;
		color: blueviolet;
		font-size: 18px;
		margin-bottom: 20px;
	}

	label.el-checkbox.rememberme {
		margin: 0px 0px 15px;
		text-align: left;
	}

	label.el-button.forget {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
	}
</style>
